<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网站侧边工具栏</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .container {
        position: relative;
        width: 1200px;
        height: 2000px;
        background-color: #ccc;
        margin: 0 auto;
      }

      .container .side1 {
        position: fixed;
        /*
          补充知识:  
          1.vh表示可视区域的高度,vw表示可视区域的宽度,前面的数值表示百分比
          2.css也是可以进行计算,通过calc()函数来计算,括号中书写算式,注意: 运算符前后必须保留空格
        */
        top: calc(50vh - 200px);
        right: 0;
        width: 100px;
        height: 400px;
        background-color: paleturquoise;
      }

      .container .side2 {
        position: absolute;
        top: 200px;
        left: -110px;
        width: 100px;
        height: 400px;
        background-color: palegreen;
      }

      /* 
        如何把侧边栏固定在版心右侧?
        1.向右偏移50%
        2.向右移动半个版心的距离

        如何把侧边栏固定在版心左侧?
        1.向右偏移50%
        2.向左移动半个版心+本身宽度的距离
      */
      .container .side3 {
        position: fixed;
        top: calc(50vh - 200px);
        left: 50%;
        margin-left: 610px;
        /* margin-left: calc((600px + 100px + 10px) * -1); */
        width: 100px;
        height: 400px;
        background-color: palevioletred;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="side1"></div>
      <div class="side2"></div>
      <div class="side3"></div>
    </div>
  </body>
</html>
